<template>
  <div id="app">
    <ul>
      <li
        v-for="listItem in listData"
        :key="listItem.id"
        class="SpecificationList"
        @mouseenter="changePosition(listItem)"
        @mouseleave="changePosition(listItem)"
      >
        <!-- 规格名 -->
        <div class="Specificationtext">
          <p>规格名：</p>
          <el-select v-model="listItem.text" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.text"
              :value="item.text"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
          <!-- 删除规格按钮 -->
          <i
            class="el-icon-error"
            :class="listItem.deleteBtn ? 'show' : 'hide'"
            @click="ev_removeItem(listItem.id)"
          ></i>
        </div>
        <!-- 规格名结束 -->
        <!-- 规格值 -->
        <div class="SpecificationValue">
          <p>规格值：</p>
          <p
            class="Specification"
            v-for="(listValue, index) in listItem.value"
            :key="index"
          >
            <span>{{ listValue }}</span
            ><i
              class="el-icon-close"
              @click="
                ev_removeValue(listItem.id, listValue);
                ev_changeMore(listItem.id, listItem.value, listItem.text);
              "
            ></i>
          </p>
          <!-- 增加规格值按钮（规格名为空时隐藏） -->
          <i
            class="el-icon-circle-plus-outline"
            @click="ev_addValue(listItem.id)"
            v-if="listItem.text != ''"
          ></i>
          <!-- 新增规格值（默认隐藏） -->
          <el-select
            v-model="listItem.value"
            multiple
            filterable
            placeholder="请选择"
            v-if="listItem.valueShow"
            @change="ev_changeMore(listItem.id, listItem.value, listItem.text)"
          >
            <el-option
              v-for="typeItem in ev_typeSelect(listItem.text)"
              :key="typeItem.value"
              :label="typeItem.text"
              :value="typeItem.text"
              :disabled="typeItem.disabled"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 规格值结束 -->
      </li>
    </ul>
    <div class="addItem">
      <el-button @click="ev_addItem">添加规格项目</el-button>
    </div>

    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column
        v-if="listData[0] && listData[0].children.length"
        prop="k_1"
        :label="this.listData[0].text"
        width="180"
      >
      </el-table-column>
      <el-table-column
        v-if="listData[1] && listData[1].children.length"
        prop="k_2"
        :label="this.listData[1].text"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="180"
        v-if="tableData.length"
      >
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.price"
            controls-position="right"
            :min="0.00"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="stock"
        label="库存"
        width="180"
        v-if="tableData.length"
      >
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.stock"
            controls-position="right"
            :min="0.00"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="marked_price"
        label="成本价"
        width="180"
        v-if="tableData.length"
      >
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.marked_price"
            controls-position="right"
            :min="0.00"
          ></el-input-number>
        </template>
      </el-table-column>
    </el-table>
    <!-- <table>
      <th>
        <td v-for="item in listData" :key="item.id">{{item.text}}</td>
      </th>
      <tbody>
        <tr v-for="(item,idx) in tableData" :key="idx">
          <td>{{item.k_1}}</td>
          <td>{{item.k_2}}</td>
        </tr>
      </tbody>
    </table> -->
    <div>
      <p>规格组合</p>
      {{listData}}
    </div>
    <div>
      <p>表格组合</p>
      {{showData}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        // {
        //   id: 0,
        //   text: "颜色",
        //   value: ["1"],
        //   children: [
        //     {
        //       id: 99,
        //       value: "1",
        //       text: "1",
        //       disabled: false,
        //     },
        //   ],
        //   valueShow: false,
        // },
      ],
      tableData: "",
      showData:[],
      options: [
        {
          id:10086,
          value: "选项1",
          text: "颜色",
          disabled: false,
          typeOptions: [
            {
              id: 99,
              value: "1",
              text: "蓝色",
              disabled: false,
            },
            {
              id: 98,
              value: "2",
              text: "红色",
              disabled: false,
            },
          ],
        },
        {
          id:1008611,
          value: "选项2",
          text: "尺寸",
          disabled: false,
          typeOptions: [
            {
              id: 97,
              value: "3",
              text: "xl",
              disabled: false,
            },
            {
              id: 96,
              value: "4",
              text: "xxl",
              disabled: false,
            },
          ],
        },
      ],
    };
  },
  watch: {
    listData: {
      handler(val) {
        for (var i = 0; i < this.options.length; i++) {
          var flag = false;
          for (var j = 0; j < val.length; j++) {
            if (this.options[i].text == val[j].text) {
              flag = true;
            }
          }
          this.options[i].disabled = flag;
        }
        this.ev_changeTable();
      },
      deep: true,
    },
    tableData:{
      handler(){
        this.ev_showData();
      },
      deep:true
    }
  },

  methods: {
    arraySpanMethod({ rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex);
      if (columnIndex == 0) {
        if (this.listData[1] && this.listData[1].children.length) {
          if (rowIndex % this.listData[1].children.length == 0) {
            return {
              rowspan: this.listData[1].children.length,
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },
    changePosition(val) {
      var index = this.listData.indexOf(val);
      this.listData[index].deleteBtn = !this.listData[index].deleteBtn;
    },
    ev_changeTable() {
      this.tableData = [];
      if (this.listData[0].children.length) {
        for (var i = 0; i < this.listData[0].children.length; i++) {
          if (this.listData[1] && this.listData[1].children.length) {
            for (var j = 0; j < this.listData[1].children.length; j++) {
              var json = {
                price: "",
                stock: "",
                marked_price: "",
                k_1: this.listData[0].children[i].text,
                k_2: this.listData[1].children[j].text,
              };
              this.tableData.push(json);
            }
          } else {
            var json1 = {
              price: "",
              stock: "",
              marked_price: "",
              k_1: this.listData[0].children[i].text,
            };
            this.tableData.push(json1);
          }
        }
      }
      console.log("table:", this.tableData);
      
    },
    ev_showData(){
      this.showData=[]
      for(var i=0;i<this.tableData.length;i++){
        var jsonk_1={}
        if(this.tableData[i].k_1){
          this.options.forEach(o=>{
            o.typeOptions.forEach(t=>{
              if(t.text==this.tableData[i].k_1){
                jsonk_1={
                  k_id:o.id,
                  k:o.text,
                  v_id:t.id,
                  v:t.text
                }
              }
            })
          })
        }
        var jsonk_2={}
        if(this.tableData[i].k_2){
          this.options.forEach(o=>{
            o.typeOptions.forEach(t=>{
              if(t.text==this.tableData[i].k_2){
                jsonk_2={
                  k_id:o.id,
                  k:o.text,
                  v_id:t.id,
                  v:t.text
                }
              }
            })
          })
        }
        
        var json={
          skus:[
            jsonk_1
          ],
        }
        if(jsonk_2.k){
          json.skus.push(jsonk_2)
        }
        var price=this.tableData[i].price
        var stock=this.tableData[i].stock
        var marked_price=this.tableData[i].marked_price
        if(price){
          json.price=price
        }
        if(stock){
          json.stock=stock
        }
        if(stock){
          json.marked_price=marked_price
        }
        this.showData.push(json)
      }
    },
    ev_changeMore(id, val, text) {
      var listIndex = 0;
      this.listData.forEach((e) => {
        if (e.id == id) {
          listIndex = this.listData.indexOf(e);
        }
      });
      var optionIndex;
      this.options.forEach((e) => {
        if (e.text == text) {
          optionIndex = this.options.indexOf(e);
        }
      });
      this.listData[listIndex].children = [];
      this.options[optionIndex].typeOptions.forEach((e) => {
        val.forEach((v) => {
          if (v == e.text) {
            this.listData[listIndex].children.push(e);
          }
        });
      });
    },
    ev_typeSelect(text) {
      var index = 0;
      this.options.forEach((e) => {
        if (e.text == text) {
          index = this.options.indexOf(e);
        }
      });
      return this.options[index].typeOptions;
    },
    ev_addItem() {
      var ids = !this.listData.length
        ? 0
        : this.listData[this.listData.length - 1].id + 1;
      var json = {
        id: ids,
        text: "",
        value: [],
        children: [],
        valueShow: false,
        deleteBtn: false,
      };
      this.listData.push(json);
    },
    ev_removeItem(idx) {
      var index = 0;
      this.listData.forEach((e) => {
        if (e.id == idx) {
          index = this.listData.indexOf(e);
        }
      });
      this.listData.splice(index, 1);
    },
    ev_addValue(idx) {
      var index = 0;
      this.listData.forEach((e) => {
        if (e.id == idx) {
          index = this.listData.indexOf(e);
        }
      });
      this.listData[index].valueShow = !this.listData[index].valueShow;
    },
    ev_removeValue(id, val) {
      var listIndex = 0;
      this.listData.forEach((item) => {
        if (item.id == id) {
          listIndex = this.listData.indexOf(item);
        }
      });
      var valIndex = 0;
      this.listData[listIndex].value.forEach((item) => {
        if (item == val) {
          valIndex = this.listData[listIndex].value.indexOf(item);
        }
      });
      this.listData[listIndex].value.splice(valIndex, 1);
    },
  },
};
</script>
<style lang="less" scoped>
#app {
  font-size: 10px;
}
/deep/ .el-select {
  height: 30px;
  font-size: 10px;
  // margin-top:5px ;
}
/deep/ .el-icon-circle-plus-outline {
  margin-top: 20px;
}
/deep/ .el-select__tags {
  height: 8px;
}
/deep/ .el-icon-close {
  margin-top: 5px;
  margin-left: 5px;
}
ul,
li {
  list-style: none;
  /deep/ .el-input__inner {
    height: 28px;
  }
}
ul {
  width: 100%;
  padding: 0;
  margin-bottom: 0;
}
p,
span {
  margin: 0;
  padding: 0;
}
.SpecificationList {
  line-height: 50px;
  .Specificationtext {
    padding-left: 10px;
    position: relative;
    background: #f8f8f8;
    height: 50px;
    display: flex;
    .hide {
      position: absolute;
      right: -30px;
      top: 20px;
      transition: 0.5s;
    }
    .show {
      position: absolute;
      right: 10px;
      top: 20px;
      transition: 0.5s;
    }
  }
  .SpecificationValue {
    padding-left: 10px;
    height: 50px;
    display: flex;
    .Specification {
      border: 1px solid red;
      color: red;
      padding: 1px;
      height: 20px;
      display: flex;
      line-height: 20px;
      margin-top: 15px;
      margin-right: 5px;
    }
  }
}
.addItem {
  padding-left: 10px;
  height: 42px;
  line-height: 42px;
  background-color: #f8f8f8;
  /deep/ .el-button {
    font-size: 12px;
    padding: 7px 15px;
  }
}
</style>